1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
"use client";
import { useRouter } from "next/navigation";
import {
ResultsOverlay,
ResultsCard,
ResultsTitle,
BigScore,
StatsGrid,
StatBlock,
StatValue,
StatLabel,
ActionRow,
PlayAgainBtn,
HomeBtn,
} from "../page.styles";
import { GState } from "../game.stat";
interface ResultsViewProps {
g: GState;
accuracy: number;
wpm: number;
songTitle: string;
onPlayAgain: () => void;
}
export default function ResultsView({
g,
accuracy,
wpm,
songTitle,
onPlayAgain,
}: ResultsViewProps) {
const router = useRouter();
return (
<ResultsOverlay>
<ResultsCard>
<ResultsTitle>Results — {songTitle}</ResultsTitle>
<BigScore>{g.score.toLocaleString()}</BigScore>
<StatsGrid>
<StatBlock>
<StatValue>{accuracy}%</StatValue>
<StatLabel>Accuracy</StatLabel>
</StatBlock>
<StatBlock>
<StatValue>x{g.maxCombo}</StatValue>
<StatLabel>Max Combo</StatLabel>
</StatBlock>
<StatBlock>
<StatValue>{wpm}</StatValue>
<StatLabel>WPM</StatLabel>
</StatBlock>
<StatBlock>
<StatValue>{g.totalMiss}</StatValue>
<StatLabel>Missed Chars</StatLabel>
</StatBlock>
</StatsGrid>
<ActionRow>
<PlayAgainBtn onClick={onPlayAgain}>Play Again</PlayAgainBtn>
<HomeBtn onClick={() => router.push("/")}>Home</HomeBtn>
</ActionRow>
</ResultsCard>
</ResultsOverlay>
);
}
|
